<template>
	<view class="goods">
		<view class="goods-tabar">
			<view class="goods-tabar-left">
				<view class="goods-tabar-left-part" @click="Toindex">
					<view class="goods-tabar-left-img">
						<image src="../static/goods/home.png" style="width: 48rpx; height: 48rpx;"></image>
					</view>
					<view class="goods-tabar-left-title">
						<text style="font-size: 24rpx;">首页</text>
					</view>
				</view>
				<view class="goods-tabar-left-part" @click="ToService">
					<view class="goods-tabar-left-img">
						<image src="../static/goods/service.png" style="width: 48rpx; height: 48rpx;"></image>
					</view>
					<view class="goods-tabar-left-title">
						<text style="font-size: 24rpx;">客服</text>
					</view>
				</view>
			</view>
			<view class="goods-tabar-right">
				<view class="goods-tabar-right-button" @click="GoOrd()">
					<text>免押租</text>
				</view>
			</view>

		</view>
		<view class="goods-swiper">
			<swiper class="goods-swiper-part" indicator-dots="ture">
				<swiper-item v-for="(item,index) in goods_img" :key="index">
					<image :src="imgurl + item" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
			<view class="goods-swiper-menu">
				<view class="goods-swiper-menu-img" @click="ToSuggest()">
					<image src="../static/goods/complain-icon.png" style="width: 100%;height: 100%;"></image>
				</view>
				<button open-type="share" class="share-button"></button>
				<!-- <view class="goods-swiper-menu-img" style="margin-top: 20rpx;">
					<image src="../static/goods/share.png" style="width: 100%;height: 100%;"></image>
				</view> -->
			</view>
		</view>
		<view class="goods-connet">
			<view class="goods-connet-part">
				<view class="goods-connet-part-price">
					<view class="goods-connet-part-price-top">
						<view class="goods-connet-part-price-left">
							<text style="font-size: 24rpx; color: white;">￥</text>
							<text
								style="font-size: 48rpx; position: relative; top: -12rpx; color: white; font-weight: bold;">{{goods_data.min_price}}</text>
							<text style="font-size: 24rpx; color: white;">/天起</text>
						</view>
						<view class="goods-connet-part-price-middle"
							v-if="(goods_data.dayRent_new && goods_data.activity)">
							<view class="goods-connet-part-price-middle-tips">
								<text style="font-size: 28rpx;">券后价</text>
								<text
									style="font-size: 28rpx;text-decoration:line-through">原价￥{{goods_data.min_price_g}}天</text>
							</view>
						</view>
						<view class="goods-connet-part-price-right">
							<text style="font-size: 32rpx; color: #7f7f7f;">销量{{goods_data.sell_num}}</text>
						</view>
					</view>
				</view>
				<view class="goods-connet-part-listpart">
					<view class="goods-connet-part-listpart-title">
						<text style="font-size: 32rpx; font-weight: bold;">{{goods_data.extension_title}}</text>

					</view>
					<view class="goods-connet-part-listpart-tips">
						<view class="goods-connet-part-listpart-tips-left">
							<view class="goods-connet-part-listpart-tips-part"
								style="border-right: solid 4rpx #f7f7f7;">
								<image src="../../static/d05.png" mode="scaleToFill"
									style="width: 26rpx;height: 26rpx;">全新</image>
							</view>
							<view class="goods-connet-part-listpart-tips-part"
								style="border-right: solid 4rpx #f7f7f7;">
								<image src="../../static/d05.png" mode="scaleToFill"
									style="width: 26rpx;height: 26rpx;">包邮</image>
							</view>
							<view class="goods-connet-part-listpart-tips-part">
								<image src="../../static/d05.png" mode="scaleToFill"
									style="width: 26rpx;height: 26rpx;">可买断</image>
							</view>
						</view>
						<view class="goods-connet-part-listpart-tips-right">
							<text style="font-size: 32rpx; color: #7f7f7f;">{{goods_data.min_lease_term}}天起租</text>
						</view>
					</view>
				</view>
				<view class="goods-connet-part-listpart2" v-show="NoCoupon">
					<view class="goods-connet-part-listpart2-connet" style="width: 74%;">
						<view class="goods-connet-part-listpart2-connet-left" style="width:40%;">
							<text style="font-size: 32rpx; font-weight: 600;margin-left: 20rpx;">固定折扣券</text>
						</view>
						<view class="goods-connet-part-listpart2-connet-right">
							<view class="goods-connet-part-listpart2-connet-right-tips"
								style="width: 280rpx; background-color: #feeae9; border: red solid 2rpx;">
								<image src="../static/goods/d04.png" style="width: 28rpx;height: 28rpx;"></image>
								<text style="font-size: 32rpx;margin-left: 10rpx;">首月免押5折</text>
							</view>
						</view>
					</view>
					<view class="goods-connet-part-listpart2-connet-tips" style="width: 26%;" @click="ShowCouponView()">
						<text style="font-size: 32rpx;margin-right: 20rpx;">前往领取></text>
					</view>
				</view>
				<view class="goods-connet-part-listpart2" style="height: 160rpx; top: -190rpx;">
					<view class="goods-connet-part-listpart2-connet">
						<view class="goods-connet-part-listpart2-connet-left">
							<text style="font-size: 32rpx; font-weight: 600; margin-left: 20rpx;">租金</text>
						</view>
						<view class="goods-connet-part-listpart2-connet-right">
							<view class="goods-connet-part-listpart2-connet-right-tips">
								<text style="font-size: 32rpx;">信用免押</text>
							</view>
						</view>
					</view>
					<view class="goods-connet-part-listpart2-connet-tips">
						<text style="font-size: 32rpx;margin-right: 20rpx;">市场价￥{{goods_data.min_price_g}}起</text>
					</view>
				</view>
				<view class="goods-connet-part-listpart3">
					<view class="goods-connet-part-listpart3-tips">
						<text style="font-size: 32rpx; font-weight: 600; margin-left: 20rpx;">配送</text>
					</view>
					<view class="goods-connet-part-listpart3-connet">
						<text style="font-size: 32rpx; margin-right: 10rpx;">{{goods_data.convey_type}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-details" :class="{ NoCoupnView:! NoCoupon}">
			<view class="goods-details-tab">
				<view class="goods-details-tab-part" @click="ChangedFirstTab()">
					<view class="goods-details-tab-part-text">
						<text style="font-size: 42rpx;" :class="{showlinetext:changegoodstab}">商品详情</text>
					</view>
					<view class="tab-line" :class="{showline:changegoodstab}"></view>
				</view>
				<view class="goods-details-tab-part" @click="ChangedSecondTab()">
					<view class="goods-details-tab-part-text">
						<text style="font-size: 42rpx;" :class="{showlinetext:!changegoodstab}">租赁说明</text>
					</view>
					<view class="tab-line" :class="{showline:!changegoodstab}"></view>
				</view>
			</view>
			<view class="goods-details-connet" v-html="goods_content" v-show="goodsdetail"></view>
			<view class="goods-details-connet" v-if="!goodsdetail">
				<image :src="imgurl + item" mode="widthFix" style="height: 400rpx;width: 100%;"
					v-for="(item,index) in rent_detail" :key="index"></image>
			</view>
		</view>
		<view class="couponview" v-show="CouponView">
			<view class="couponview-hidden" @click="surehideCouponView()"></view>
			<view class="couponview-part" :class=" {CouponViewPart :  hideCouponView} ">
				<view class="couponview-part-top" v-show=" !viewPart ">
					<view class="couponview-part-top-connet">
						<text>优惠价领取</text>
						<image src="../static/suggest/close.png" style="width: 56rpx; height: 56rpx;"
							@click="surehideCouponView()"></image>
					</view>
				</view>
				<view class="goods-coupon-part" v-show=" !viewPart ">
					<view class="usecoupon-coupon" v-for="(item,index) in []" :key="index">
						<view class="receiving-part">
							<view class="receiving-part-left">
								<view class="receiving-part-left-text">
									<text style="font-size: 36rpx; font-weight: 600; color: white;">首月租金5折</text>
								</view>
							</view>
							<view class="receiving-part-right">
								<view class="receiving-part-right-top">
									<view class="receiving-part-right-top-left">
										<view class="receiving-part-right-top-left-connet">
											<text style="font-size: 24rpx; color: white;">固定折扣券</text>
										</view>
									</view>
									<text style="font-size: 24rpx;">可用于全部商城</text>
								</view>
								<view class="receiving-part-right-bottom">
									<text
										style="margin-left: 10rpx; font-size: 24rpx; line-height: 80rpx; display: block;">可参与首月租金抵扣</text>
									<text
										style="margin-left: 10rpx; font-size: 24rpx; line-height: 80rpx; display: block;">领取后1天有效</text>
									<view class="receiving-buttom">
										<text style="color: #ffffff;font-size: 28rpx;">已领取</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="GoOrder" v-show="viewPart">
					<view class="GoOrder-top">
						<view class="GoOrder-top-part">
							<view class="GoOrder-top-part-top">
								<view class="GoOrder-top-part-top-left">
									<image :src="top_img" style="width: 90%; height: 90%;">
									</image>
								</view>
								<view class="GoOrder-top-part-top-middle">
									<view class="GoOrder-top-part-top-middle-top">
										<view class="GoOrder-top-part-top-middle-top-part"
											style="display: flex; align-items: flex-end;">
											<text style="font-size: 24rpx;">￥</text>
											<text style="font-size: 38rpx;">{{top_value}}</text>
											<text style="font-size: 24rpx;">/天</text>
										</view>
									</view>
									<view class="GoOrder-top-part-top-middle-bottom">
										<view class="GoOrder-top-part-top-middle-top-part">
											<text style="font-size: 24rpx; color: black;">已选：</text>
											<text style="font-size: 24rpx; color: black;">{{taocantitle}}</text>
											<text style="font-size: 24rpx; color: black;">{{yansetitle}}</text>
											<text style="font-size: 24rpx; color: black;">{{guigetitle}}</text>
											<text style="font-size: 24rpx; color: black;">{{zuqititle}}</text>
										</view>
									</view>
								</view>
								<view class="GoOrder-top-part-top-right">
									<image src="../static/suggest/close.png" style="width: 56rpx; height: 56rpx;"
										@click="surehideCouponView()"></image>
								</view>
							</view>
							<view class="GoOrder-top-part-bottom" v-show="goods_value">
								<view class="GoOrder-top-part-bottom-part">
									<view class="GoOrder-top-part-bottom-part-top">
										<text>￥{{goods_value.firstRent}}</text>
									</view>
									<view class="GoOrder-top-part-bottom-part-bottom">
										<text>首期租金</text>
									</view>
								</view>
								<view class="GoOrder-top-part-bottom-part">
									<view class="GoOrder-top-part-bottom-part-top">
										<text>￥{{goods_value.totalRent}}</text>
									</view>
									<view class="GoOrder-top-part-bottom-part-bottom">
										<text>总租金</text>
									</view>
								</view>
								<view class="GoOrder-top-part-bottom-part">
									<view class="GoOrder-top-part-bottom-part-top">
										<text>￥{{goods_value.totalValue}}</text>
									</view>
									<view class="GoOrder-top-part-bottom-part-bottom">
										<text>买断价</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="GoOrder-line"></view>
					<view class="GoOrder-part">
						<view class="GoOrder-part-title">
							<text>租赁套餐</text>
						</view>
						<view class="GoOrder-part-connet">
							<view class="GoOrder-part-connet-button" :class="{choosedgood : taocan == 1}"
								v-if="goods_data.pact_type == 1 || goods_data.pact_type[0]==1"
								@click="taocanbin(1,'租完归还/续租/买断')">
								<text style="margin-left: 40rpx; margin-right: 40rpx;">租完归还/续租/买断</text>
							</view>
							<view class="GoOrder-part-connet-button" :class="{choosedgood : taocan == 2}"
								v-if="goods_data.pact_type == 2 || goods_data.pact_type[1]==2"
								@click="taocanbin(2,'租完即送')">
								<text style="margin-left: 40rpx;margin-right: 40rpx;">租完即送</text>
							</view>
						</view>

					</view>
					<view class="GoOrder-part">
						<view class="GoOrder-part-title">
							<text>颜色</text>
						</view>
						<view class="GoOrder-part-connet">
							<view class="GoOrder-part-connet-button" :class="{choosedgood : yanse == index}"
								v-for="(item,index) in colorList" :key="index" @click="yansebin(index,item)">
								<text style="margin-left: 40rpx; margin-right: 40rpx;">{{item}}</text>
							</view>
						</view>

					</view>
					<view class="GoOrder-part">
						<view class="GoOrder-part-title">
							<text>规格</text>
						</view>
						<view class="GoOrder-part-connet">
							<view class="GoOrder-part-connet-button" :class="{choosedgood : guige == index}"
								v-for="(item,index) in specsList" :key="index" @click="guigebin(index,item)">
								<text style="margin-left: 40rpx; margin-right: 40rpx;">{{item}}</text>
							</view>
						</view>
					</view>
					<view class="GoOrder-part">
						<view class="GoOrder-part-title">
							<text>租期</text>
						</view>
						<view class="GoOrder-part-connet">
							<view class="GoOrder-part-connet-button" :class="{choosedgood : zuqi == index}"
								@click="zuqibin(index,item)" v-for="(item,index) in rentList" :key="index">
								<text style="margin-left: 40rpx; margin-right: 40rpx;">{{item}}</text>
							</view>
						</view>
					</view>
					<!--  -->
					<view class="GoOrder-part" v-if="unicom.length">
						<view class="GoOrder-part-title">
							<image class="unicom-img" src="@/static/unicom/unicom_01.png" mode="widthFix"></image>
						</view>
						<view class="GoOrder-part-connet">
							<view class="GoOrder-part-connet-button" v-for="(item,index) in unicom"
								:class="{choosedgood : unicomIndex == index}" @click="selectUnicom(index,item)"
								:key="index">
								<text style="margin-left: 40rpx; margin-right: 40rpx;">{{item.value}}</text>
							</view>
						</view>
					</view>
					<view class="GoOrder-part" v-if="insurance.length">
						<view class="GoOrder-part-title">
							<image class="scale" src="@/static/unicom/unicom_02.png" mode="widthFix"></image>
						</view>
						<view class="GoOrder-part-connet">
							<view class="GoOrder-part-connet-button" v-for="(item,index) in insurance"
								:class=" {choosedgood :insuranceIndex==index}" @click="selectinsurance(index)"
								:key="index">
								<text style="margin-left: 40rpx; margin-right: 40rpx;">{{item.value}}</text>
							</view>
						</view>
					</view>
					<view class="goods-number">
						<view class="goods-number-part">
							<view class="goods-number-part-left">
								<text>租赁数量</text>
							</view>
							<view class="goods-number-part-right">
								<view class="goods-number-part-right-number">
									<view class="goods-number-part-right-number-icon" @click="goodcut()">
										<text>-</text>
									</view>
									<view class="goods-number-part-right-number-middle">
										<input type="number" style="width: 90%; height: 90%; font-size: 32rpx;"
											:value="goodnumber">
									</view>
									<view class="goods-number-part-right-number-icon" style="margin-right: 5rpx;"
										@click="goodadd()">
										<text>+</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="GoOrder-buttom">
						<view class="GoOrder-buttom-button" :class="{choosedbuttom : bottom}" @click="ToSureOrder()">
							<text>查看免押额度</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="buy-order-box" @click="closeBuyOrder" :class="{active : showQrcode,bg : bgActive}">
			<view class="buy-order" @click.stop>
				<view class="title">
					打开支付宝扫一扫
					<text class="red">98.84%</text>
					享0押金租
				</view>
				<image class="qr-code" :src="qrcode_url"></image>
				<view class="my-btn btn1" @click="saveImage">
					保存二维码到相册
				</view>
				<view class="my-btn btn2" @click="saveImage">
					复制链接
				</view>
				<view class="step">
					<view class="line"></view>
					<text class="text">打开支付宝下单流程</text>
					<view class="line"></view>
				</view>
				<image class="step-img" src="../static/step.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsdetail: true,
				imgurl: this.$imgURL2,
				changegoodstab: true,
				CouponView: false,
				goord: false,
				hideCouponView: false,
				NoCoupon: true,
				viewPart: false,
				goodnumber: 1,
				taocan: 0,
				yanse: -1,
				guige: -1,
				zuqi: -1,
				taocantitle: '',
				yansetitle: '',
				guigetitle: '',
				zuqititle: '',
				bottom: false,
				good_id: '',
				goods_data: '',
				rent_meal: [],
				colorList: [],
				specsList: [],
				rentList: [],
				goods_img: [],
				unicom: [],
				insurance: [],
				unicomIndex: -1,
				insuranceIndex: -1,
				goods_content: '',
				goods_value: '',
				top_value: '',
				yuanjia: '',
				top_img: '',
				rent_detail: [
					'/material/info_phone_01.jpg',
					'/material/info_phone_02.jpg'
				],
				spec_id: '',
				showQrcode: false,
				bgActive: false,
				qrcode_url: "",
			}
		},
		watch: {
			taocan() {
				if ((this.taocan >= 0) && (this.yanse >= 0) && (this.zuqi >= 0) && (this.guige >= 0)) {
					this.bottom = true
					this.getGoodsPrices()
				} else {
					this.bottom = false
				}
			},
			yanse() {
				if ((this.taocan >= 0) && (this.yanse >= 0) && (this.zuqi >= 0) && (this.guige >= 0)) {
					this.bottom = true
					this.getGoodsPrices()
				} else {
					this.bottom = false
				}
			},
			zuqi() {
				if ((this.taocan >= 0) && (this.yanse >= 0) && (this.zuqi >= 0) && (this.guige >= 0)) {
					this.bottom = true
					this.getGoodsPrices()
				} else {
					this.bottom = false
				}
			},
			guige() {
				if ((this.taocan >= 0) && (this.yanse >= 0) && (this.zuqi >= 0) && (this.guige >= 0)) {
					this.bottom = true
					this.getGoodsPrices()
				} else {
					this.bottom = false
				}
			},
			goodnumber(newvalue, ordvalue) {
				this.top_value = parseFloat(this.yuanjia) * newvalue
			}
		},
		onLoad(option) {
			this.good_id = option.goods_id ? option.goods_id : option.goodsId
			uni.request({
				url: this.$apiUrl + 'Goods/getGoodsInfo',
				method: 'GET',
				data: {
					goods_id: this.good_id
				},
				success: (res) => {
					let arr = res.data.data.attr;
					this.goods_data = res.data.data;

					for (let key in arr) {
						if (arr[key].type == 1) {
							this.colorList.push(arr[key].value)
						} else if (arr[key].type == 2) {
							this.specsList.push(arr[key].value)
						} else if (arr[key].type == 3) {
							this.rentList.push(arr[key].value)
						}
					}
					this.findTypeData("unicom", 4);
					this.findTypeData("insurance", 5);
					this.top_img = this.imgurl + res.data.data.imgurl;
					this.top_value = res.data.data.default_price;
					this.goods_img = (res.data.data.carousel_images).split(",");
					this.goods_content = (res.data.data.goods_content)
						.replaceAll("img ", "img style='width : 100%;'");
				}
			})
		},
		methods: {
			saveImage() {
				uni.downloadFile({
					url: this.qrcode_url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: "保存成功",
										icon: "success"
									})
								},
								fail: () => {
									uni.showToast({
										title: "保存出错",
										icon: "error",
									})
								}
							});
						}
					}
				});
			},
			findTypeData(name, type) {
				this[name] = this.goods_data.attr.filter(i => {
					return i.type === type
				})
			},
			selectinsurance(index) {
				if (this.insuranceIndex === index) {
					this.insuranceIndex = -1;
				} else {
					this.insuranceIndex = index;
				}
			},
			selectUnicom(index) {
				if (this.unicomIndex === index) {
					this.unicomIndex = -1;
				} else {
					this.unicomIndex = index;
				}
			},
			getGoodsPrices() {
				const allDataList = JSON.stringify([{
					title: this.taocantitle,
				}, {
					title: this.yansetitle,
				}, {
					title: this.guigetitle,
				}, {
					title: this.zuqititle,
				}])

				uni.request({
					url: this.$apiUrl + 'Goods/getGoodsPrices',
					method: 'GET',
					data: {
						allDataList,
						goods_id: this.good_id
					},
					success: (res) => {
						this.goods_value = res.data.data
						this.top_value = res.data.data.dayRent * this.goodnumber
						this.yuanjia = res.data.data.dayRent
						this.top_img = this.imgurl + res.data.data.meal_img
					}
				})
			},
			changeQrCode() {
				const data = {
					goods_id: this.goods_data.id,
					goods_name: this.goods_data.extension_title
				}
				uni.showLoading({
					title: "Loading"
				})

				this.showQrcode = true;
				setTimeout(() => {
					this.bgActive = true;
				}, 400)

				/* 以下两行代码测试用的 */
				// uni.hideLoading();
				// this.qrcode_url = "http://tntliao.cn/img/touxiang.7df2a42d.jpg";
				//接口正常使用
				this.$http("GET", 'Order/toAlipay', data)
					.then(res => {
						const {
							qrcode_url
						} = res.data.data;
						this.qrcode_url = qrcode_url;
					}).finally(() => {
						uni.hideLoading();
					})
			},
			closeBuyOrder() {
				this.bgActive = false;
				setTimeout(() => {
					this.showQrcode = false;
				}, 300)
			},
			ToSureOrder() {
				return this.changeQrCode();

				if (this.bottom) {
					uni.navigateTo({
						url: '/pagesA/sureorder/sureorder?goods_id=' + this.goods_data.id + '&amount=' + this
							.goodnumber + '&setmeal_id=' + this.goods_value.setmealId + '&spec_id=' + this
							.goods_value.leaseId
					})
				}
			},
			zuqibin(index, item, id, all) {
				this.spec_id = id
				if (this.zuqi == index) {
					return this.zuqi = -1, this.zuqititle = null
				}
				this.zuqi = index
				this.zuqititle = item
			},
			guigebin(index, item) {
				if (this.guige == index) {
					return this.guige = -1, this.guigetitle = null
				}
				this.guige = index
				this.guigetitle = item + ','
			},
			yansebin(index, item) {
				if (this.yanse == index) {
					return this.yanse = -1, this.yansetitle = null
				}
				this.yanse = index
				this.yansetitle = item + ','
			},
			taocanbin(index, item) {
				if (this.taocan == index) {
					return this.taocan = 0, this.taocantitle = null
				}
				this.taocan = index
				this.taocantitle = item + ','

			},
			goodadd() {
				if (this.goodnumber >= this.goods_value.quantity) {
					return uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
				}
				this.goodnumber++
			},
			goodcut() {
				if (this.goodnumber > 1) {
					this.goodnumber--
				} else {
					this.goodnumber = 1
				}
			},
			ToSuggest() {
				uni.navigateTo({
					url: '/pagesA/suggest/suggest'
				})
			},
			ChangedFirstTab() {
				this.changegoodstab = true
				this.goodsdetail = true
			},
			ChangedSecondTab() {
				this.changegoodstab = false
				this.goodsdetail = false
			},
			Toindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			ToService() {
				uni.switchTab({
					url: '/pages/service/service'
				})
			},
			surehideCouponView() {
				this.hideCouponView = true
				setTimeout(() => {
					this.CouponView = !this.CouponView
					this.hideCouponView = false
				}, 200)
			},
			GoOrd() {
				this.CouponView = !this.CouponView
				this.viewPart = true
			},
			ShowCouponView() {
				this.viewPart = false
				this.CouponView = !this.CouponView
			},
		},
		onShareAppMessage() {
			return {
				title: this.goods_data.extension_title,
				path: this.$mp.page.route + "?goods_id=" + this.good_id,
				imageUrl: this.imgurl + this.goods_data.imgurl,
			}
		},
	}
</script>

<style lang="scss">
	.share-button {
		width: 100%;
		height: 70rpx;
		margin-top: 20rpx;
		background-color: transparent;

		&:after {
			border: 0;
			background-image: url("../static/goods/share.png");
			background-repeat: no-repeat;
			background-size: contain;
		}
	}

	.buy-order-box {
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		position: fixed;
		z-index: 99999;
		transform: translateY(100%);
		background-color: transparent;
		transition: all .5s;

		&.active {
			transform: translateY(0);
		}

		&.bg {
			background-color: rgba(0, 0, 0, .4);
		}

		.buy-order {
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			overflow-y: scroll;
			height: 75vh;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;
			background-color: white;

			.title {
				margin-bottom: 20rpx;
				margin-top: 60rpx;

				.red {
					color: rgb(255, 32, 37);
				}
			}
		}

		.my-btn {
			width: 600rpx;
			height: 100rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: rgb(255, 32, 37);
			margin: 20rpx 0;
		}

		.btn2 {
			background-color: rgb(254, 238, 238);
			color: rgb(103, 101, 100);
		}

		.btn1 {
			color: white;
		}

		.buy-order .qr-code {
			width: 350rpx;
			height: 426rpx;
		}

		.buy-order .step-img {
			width: 650rpx;
		}

		.step {
			display: flex;
			align-items: center;

			.line {
				width: 80rpx;
				height: 3rpx;
				background-color: rgb(217, 217, 217)
			}

			.text {
				margin: 0 20rpx;
			}
		}
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;

	}

	.unicom-img {
		width: 180rpx;
	}

	.scale {
		width: 140rpx;
	}

	.hiddenY {
		/* overflow-y: hidden; */
	}

	.couponview {
		height: 100%;
		width: 100%;
		background-color: rgba(125, 125, 125, 0.3);
		position: fixed;
		z-index: 999;
		bottom: 0rpx;
	}

	.goods {
		width: 100%;
		height: 100%;

	}

	.goods-swiper {
		width: 100%;
		height: 720rpx;
	}

	.goods-swiper-part {
		width: 100%;
		height: 100%;
	}

	.goods-swiper-menu {
		width: 70rpx;
		height: 160rpx;
		position: relative;
		top: -700rpx;
		left: calc(100% - 90rpx);
	}

	.goods-swiper-menu-img {
		width: 100%;
		height: 70rpx;
	}

	.goods-connet {
		width: 100%;
		height: 650rpx;
		display: flex;
		justify-content: center;
	}

	.goods-connet-part {
		width: 90%;
		height: 100%;
	}

	.goods-connet-part {
		width: 96%;
		height: 100%;
	}

	.goods-connet-part-price {
		width: 100%;
		height: 240rpx;
		background-image: linear-gradient(to right, #1e1d1a, #2d2821, #3a3228, #463a2e);
		border-radius: 24rpx 24rpx 0 0;
	}

	.goods-connet-part-price-left {
		width: 36%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods-connet-part-price-top {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: space-between;
	}

	.goods-connet-part-price-middle {
		width: 40%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-connet-part-price-right {
		width: 24%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-connet-part-price-middle-tips {
		width: 100%;
		height: 48rpx;
		background-image: linear-gradient(to right, #f2b07d, #f2be92, #f3cdaa);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 18rpx 24rpx 24rpx 0;
	}

	.goods-connet-part-price-bottom {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: space-between;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.goods-connet-part-price-bottom-connet {
		width: 96%;
		height: 50%;
		background-color: #52483f;
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-connet-part-price-bottom-connet-img {
		width: 60rpx;
		height: 60rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-connet-part-price-bottom-connet-text {
		width: calc(100% - 84rpx);
		height: 60rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.goods-connet-part-listpart {
		width: 100%;
		height: 200rpx;
		background-color: white;
		border-radius: 24rpx 24rpx 0 0;
		position: relative;
		top: -110rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.goods-connet-part-listpart-title {
		width: 96%;
		height: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-connet-part-listpart-tips {
		width: 96%;
		height: 40%;
		display: flex;
		justify-content: center;
	}

	.goods-connet-part-listpart-tips-part {
		width: 160rpx;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-connet-part-listpart-tips-left {
		width: 74%;
		height: 100%;
		display: flex;
		justify-content: left;
		align-items: flex-start;
	}

	.goods-connet-part-listpart-tips-right {
		width: 26%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.goods-connet-part-listpart2 {
		width: 100%;
		height: 200rpx;
		background-color: white;
		border-radius: 24rpx 24rpx 0 0;
		position: relative;
		top: -132rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0), 0 0 6px rgba(0, 0, 0, .20);
	}

	.goods-connet-part-listpart2-connet {
		width: 56%;
		height: 80%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.goods-connet-part-listpart2-connet-left {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.goods-connet-part-listpart2-connet-right-tips {
		width: 200rpx;
		/* height: 60rpx; */
		background-color: #e8f2fe;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		border: solid 2rpx blue;
	}

	.goods-connet-part-listpart2-connet-right {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.goods-connet-part-listpart2-connet-tips {
		width: 44%;
		height: 80%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.goods-connet-part-listpart3 {
		width: 100%;
		height: 160rpx;
		background-color: white;
		border-radius: 24rpx;
		position: relative;
		top: -220rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0), 0 0 6px rgba(0, 0, 0, .20);

	}

	.goods-connet-part-listpart3-tips {
		width: 200rpx;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.goods-connet-part-listpart3-connet {
		width: 500rpx;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.goods-details {
		width: 100%;
		position: relative;
		top: 100rpx;
	}

	.goods-details-tab {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: solid 2rpx #f7f7f7;
		background-color: white;
	}

	.goods-details-tab-part {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.goods-details-connet {
		width: 100%;
		font-size: 0;
		padding-bottom: 100rpx;
	}

	.changedtab {
		font-size: 42rpx;
		font-weight: bold;
		height: 100%;
		display: flex;
		align-items: center;
		border-bottom: solid 4rpx red;
	}

	.tab-line {
		width: 0rpx;
		height: 4rpx;
		background-color: red;
		position: relative;
		top: -4rpx;
		font-size: 0;
		/* 		transition: width 0.5s; */
		margin: 0;
		padding: 0;
	}

	.showline {
		width: 50%;
		animation: line-out 0.5s 1;
	}

	.goods-details-tab-part-text {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.showlinetext {
		font-size: 48rxp;
		font-weight: bold;
	}

	.goods-tabar {
		width: 100%;
		position: fixed;
		height: 150rpx;
		background-color: white;
		bottom: 0;
		z-index: 999;
		border-top: solid 4rpx #f7f7f7;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 20px;
	}

	.goods-tabar-left {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.goods-tabar-left-img {
		width: 100%;
		height: 70%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.goods-tabar-left-part {
		width: 50%;
		height: 100%;
	}

	.goods-tabar-left-title {
		width: 100%;
		height: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-tabar-right {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translateY(20rpx);
	}

	.goods-tabar-right-button {
		width: 80%;
		height: 80rpx;
		background-color: red;
		border-radius: 38rpx;
		font-size: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.couponview-hidden {
		width: 100%;
		height: 20%;

	}

	.couponview-part {
		width: 100%;
		height: 80%;
		background-color: white;
		animation: couponview-out 0.2s;
		position: relative;
		border-radius: 32rpx 32rpx 0 0;
	}

	.CouponViewPart {
		animation: couponview-in 0.2s !important;
	}

	.couponview-part-top {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.couponview-part-top-connet {
		width: 96%;
		height: 100%;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.receiving-part {
		width: 90%;
		height: 240rpx;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 12rpx 0 0 12rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.receiving-part-left {
		width: 38%;
		height: 100%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx 0 0 12rpx;
	}

	.receiving-part-right {
		width: 60%;
		height: 100%;
	}

	.receiving-part-right-top {
		height: 33%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.receiving-part-right-top-left {
		width: 50%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.receiving-part-right-top-left-connet {
		width: 92%;
		height: 88%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
	}

	.receiving-part-right-bottom {
		width: 100%;
		height: 67%;
	}

	.receiving-buttom {
		position: relative;
		bottom: 80rpx;
		background-color: #c1c1c1;
		color: white;
		left: 220rpx;
		width: 36%;
		height: 64rpx;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.usecoupon-coupon {
		width: 100%;
		height: 260rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.goods-coupon-part {
		width: 100%;
		height: calc(100% - 80rpx);
		overflow: scroll;
	}

	.GoOrder-top {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.GoOrder-top-part {
		width: 90%;
		height: 94%;
	}

	.GoOrder-top-part-top {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: center;
	}

	.NoCoupnView {
		top: -90rpx
	}

	.GoOrder-top-part-top-left {
		width: 160rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: solid 2rpx #f6f6f6;
	}

	.GoOrder-top-part-top-middle {
		width: calc(100% - 240rpx);
		height: 100%;

	}

	.GoOrder-top-part-top-right {
		width: 80rpx;
		height: 100%;

		display: flex;
		justify-content: flex-end;
	}

	.GoOrder-top-part-top-middle-top {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.GoOrder-top-part-top-middle-bottom {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.GoOrder-top-part-top-middle-top-part {
		width: 90%;
		height: 100%;
		color: red;
		text-align: left;
	}

	.GoOrder-top-part-bottom {
		width: 100%;
		height: calc(100% - 160rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.GoOrder-top-part-bottom-part {
		width: 30%;
		height: 100%;

	}

	.GoOrder-top-part-bottom-part-top {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		color: red;
		font-size: 32rpx;
	}

	.GoOrder-top-part-bottom-part-bottom {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		color: #7f7f7f;
		font-size: 32rpx;
	}

	.GoOrder-line {
		width: 100%;
		height: 12rpx;
		margin-bottom: 20rpx;
		background-color: #f6f6f6;
	}

	.GoOrder-part {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.GoOrder-part-title {
		width: 90%;
		height: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
	}

	.GoOrder-part-connet {
		width: 90%;
		margin-top: 20rpx;
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.GoOrder-part-connet-button {
		/* margin-left: 20rpx; */
		margin-right: 20rpx;
		height: 60rpx;
		background-color: #efefef;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 32rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		border: transparent solid 2rpx;
	}

	.GoOrder {
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

	.goods-number {
		width: 100%;
		/* height: 300rpx; */
		padding-bottom: 150rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.goods-number-part {
		width: 90%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: solid #f7f7f7 4rpx;
	}

	.goods-number-part-left {
		width: 200rpx;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.goods-number-part-right-number {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		justify-content: flex-start;
		border: #efefef solid 2rpx;
	}

	.goods-number-part-right {
		width: 400rpx;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.goods-number-part-right-number-icon {
		width: 50rpx;
		height: 100%;
		color: skyblue;
		font-size: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-number-part-right-number-middle {
		width: 95rpx;
		height: 100%;
		font-size: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-right: #efefef solid 1rpx;
		border-left: #efefef solid 1rpx;
	}

	.GoOrder-buttom {
		width: 100%;
		height: 100rpx;
		position: fixed;
		z-index: 99;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.GoOrder-buttom-button {
		width: 90%;
		height: 70%;
		background-image: linear-gradient(to right, #7f7f7f, #8f8f8f, #f7f7f7);
		font-size: 38rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 48rpx;
	}

	.choosedgood {
		background-color: #fff4f2;
		color: red;
		border: red solid 2rpx;
	}

	.choosedbuttom {
		background-image: none !important;
		background-color: red;
	}

	.buy-order {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 70vh;
		width: 750rpx;
		box-sizing: border-box;
		background-color: white;
		z-index: 99999;
	}

	@keyframes line-out {
		from {
			width: 0px;
		}

		to {
			width: 50%;
		}
	}

	@keyframes couponview-out {
		from {
			top: 80%;
		}

		to {
			top: 0;
		}
	}

	@keyframes couponview-in {
		from {
			top: 0;
		}

		to {
			top: 80%;
		}
	}
</style>
